<template>
  <div>
    <div>
      <pInfor :foo="foo" @changeLike1="changeLike1">
        <template v-slot:returnIcon
          ><el-icon size="large" @click="returnBefore" style="cursor: pointer"
            ><ArrowLeft /></el-icon
        ></template>
      </pInfor>
    </div>

    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <div>
            <input
              type="text"
              placeholder="请发布你的评论"
              class="disInput"
              v-model="inputContent"
              style="border: 1px solid #00bfff; margin-top: -10px"
              outline:none
            />
          </div>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-button
            @click="test2"
            style="background-color: #4682b4; color: white"
            round
            >评论</el-button
          >
        </div>
      </template>
      <pinLun :foo2="foo2"></pinLun>
    </el-card>
  </div>
</template>
<script setup>
import pInfor from '../components/firstPage/pInfor.vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import router from '@/router'
import pinLun from '../components/information/pinLun.vue'
import { onMounted, reactive } from '@vue/runtime-core'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import axios from 'axios'
const router1 = useRoute()
const foo = ref([])
var foo1 = reactive({})
const foo2 = ref([])
const inputContent = ref('')
onMounted(() => {
  test()
  test1()
})
function test() {
  axios({
    url:
      'http://localhost:8080/dynamic/DetailDynamicId/' +
      router1.query.dynamicId,
    method: 'get',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    }
  }).then(function (res) {
    foo1 = res.data.data
    console.log(foo1)
    foo.value[0] = foo1
  })
}

function changeLike1() {
  console.log('nihao')
  console.log(foo.value[0])
  foo.value[0].likeState = !foo.value[0].likeState
  if (foo.value[0].likeState) {
    foo.value[0].likes += 1
  } else {
    foo.value[0].likes -= 1
  }
}

function test1() {
  axios({
    url: 'http://localhost:8080/comment/bydynamic',
    method: 'post',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    },
    data: {
      dynamicId: router1.query.dynamicId
    }
  }).then(function (res) {
    foo2.value = res.data.data
  })
}

function test2() {
  axios({
    url: 'http://localhost:8080/comment/add',
    method: 'post',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    },
    data: {
      dynamicId: router1.query.dynamicId,
      content: inputContent.value
    }
  }).then(function (res) {
    test1()
  })
}

function returnBefore() {
  router.go(-1)
}
</script>
<style lang="scss">
.dArea {
  width: 70%;
  text-align: center;
  background-color: white;
}
.disInput {
  display: flex;
  background-color: whitesmoke;
  border-radius: 20px;
  height: 28px;
  width: 800px;
}
.card-header {
  display: flex;
  margin-top: -25px;
}
.allDiscuss {
  display: flex;
  float: left;
  width: 800px;
}
</style>
